<!-- 登录 -->
<template>
  <div class="login">
    <div class="bg"></div>
    <div class="panel"
      v-loading="loading"
      element-loading-text="正在登录..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="login-title">
        <!-- <img src="../../assets/logo.png" alt="logo"> -->
        <span>一拼通放箱系统</span>
      </div>
      <el-form size="medium">
        <el-form-item class="login-el-form-item">
          <el-input v-model="loginUser.un" type="text" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item class="login-el-form-item">
          <el-input v-model="loginUser.pw" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item class="login-el-form-item">
          <el-checkbox label="记住密码" name="type" v-model="rememberPwd"></el-checkbox>
          <span @click="forgetPwd()" style="margin-left: 100px;" class="forget-pas el-checkbox__label">忘记密码？</span>
        </el-form-item>
        <el-form-item class="login-el-form-item">
          <el-button @click="login()" class="login-btn" type="primary">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div>&nbsp;</div>
      <div>
        <span>上海宏申信息科技有限公司</span>
        <a href="http://beian.miit.gov.cn" target="_blank">沪ICP备14044508</a>
      </div>
    </div>
    <!-- 忘记密码 -->
    <forget-password-dialog @visibleChange="visibleChange" :visible="forgetPwdDialogVisible"></forget-password-dialog>
    <!-- 联系客服 -->
    <customer-service></customer-service>
  </div>
</template>

<script>
// import {
//   ElButton,
//   ElForm,
//   ElFormItem,
//   ElInput,
//   ElCheckbox
// } from '@eui'
import ForgetPasswordDialog from './dialog/ForgetPasswordDialog.vue'
import CustomerService from './CustomerService.vue'
import {
  LoginValidate
} from './api/loginApi'
import util from '@util'
import { mapMutations } from 'vuex'
export default {
  components: {
    // ElButton,
    // ElForm,
    // ElFormItem,
    // ElInput,
    // ElCheckbox,
    ForgetPasswordDialog,
    CustomerService
  },
  data () {
    return {
      forgetPwdDialogVisible: false,
      loginUser: {
        un: '',
        pw: ''
      },
      rememberPwd: true,
      loading: false
    }
  },
  mounted () {
    this.FillAutomatically()
  },
  methods: {
    async login () {
      if (this.loginUser.un === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入用户名！'
        })
        return false
      }
      if (this.loginUser.pw === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入密码！'
        })
        return false
      }
      this.loading = true
      const loginRes = await LoginValidate(this.loginUser)
      if (loginRes.status === 200) {
        this.loading = false
        this.$notify({
          title: '提示',
          message: '登陆成功',
          type: 'success'
        })
        // 存入缓存
        const data = loginRes.data[0]
        // Object.assign(data, {
        //   cip: window.returnCitySN.cip
        // })
        Object.assign(data, {
          password: this.loginUser.pw
        })
        Object.assign(data, {
          fill: this.rememberPwd // 勾选状态
        })
        util.setItem('$user_fx', data)
        // 页面跳转
        this.$router.push({path: '/webLayout/dropBoxMan'})
      } else {
        this.$notify.error({
          title: '提示',
          message: loginRes.msg
        })
        this.loading = false
      }
    },
    FillAutomatically () {
      if (util.getItem('$user_fx') === null) {
        this.rememberPwd = true
        return false
      }
      if (util.getItem('$user_fx').fill === true) {
        this.loginUser.un = util.getItem('$user_fx').un
        this.loginUser.pw = util.getItem('$user_fx').password
        this.rememberPwd = util.getItem('$user_fx').fill
        return false
      }
      if (util.getItem('$user_fx').fill === false) {
        this.loginUser.un = util.getItem('$user_fx').un
        this.loginUser.pw = ''
        this.rememberPwd = util.getItem('$user_fx').fill
      }
    },
    forgetPwd () {
      this.forgetPwdDialogVisible = true
    },
    visibleChange (value) {
      this.forgetPwdDialogVisible = value
    },
    ...mapMutations([
      'updateUserStore'
    ])
  }
}
</script>

<style scoped>
  @import '../../style/_login.scss';
</style>
